<template>
  <div>
    <el-table :data="tableData" border cell-class-name="input-td">
      <el-table-column label="还款时间" prop="pay_time" align="center"></el-table-column>
      <el-table-column label="应还本金（万元）" prop="capital" align="center"></el-table-column>
      <el-table-column label="还息金额（元）" align="center">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.interest"
            type="number"
            @blur="submit(scope.$index)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="还本金额（元）" align="center">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.repay_amount"
            type="number"
            @blur="submit(scope.$index)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="是否正常" align="center">
        <template slot-scope="scope">
          <c-select
            v-model="scope.row.is_normal"
            :options="statusOptions"
            @change="onStatusChange(scope.row.is_normal, scope.$index)"
          ></c-select>
        </template>
      </el-table-column>
      <el-table-column label="备注（异常说明）" prop="remark" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.remark" @blur="submit(scope.$index)"></el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data: () => ({
    tableData: [],
    tableSolid: [],
    id: '',
    statusOptions: {
      1: '正常',
      0: '异常',
    },
  }),
  computed: {},
  watch: {
    relatedId: {
      handler: function (val) {
        if (val) {
          this.id = val
        }
        this.getRepayList()
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.initRelated()
    this.initDialogMaxHeight()
  },
  mounted() {},
  methods: {
    initRelated() {
      if (this.id) {
        return this.getRepayList()
      }
      const storageData = JSON.parse(sessionStorage.getItem('customer_related_view')) || {}
      this.id = storageData.customer_related_id || ''
      this.getRepayList()
    },
    initDialogMaxHeight() {
      const clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight
      this.dialogMaxheight = clientHeight - 300
    },
    async getRepayList() {
      if (!this.id) {
        return
      }
      this.repayLoading = true
      const [res] = await this.$utils.promise(
        this.$api.getData(
          this.$serviceName,
          'datum_repay_list',
          {
            'customer_related_id.eq': this.id,
          },
          { pay_time: 'asc' }
        )
      )
      this.repayLoading = false
      const data = (res && res.data) || []
      this.tableData = []
      this.tableSolid = []
      for (const t of data) {
        this.tableSolid.push({ ...t })
        this.tableData.push({ ...t })
      }
    },
    onStatusChange(val, index) {
      this.tableData[index].repay_amount = val === '0' ? 0 : this.tableData[index].capital
      this.submit(index)
    },
    async submit(index) {
      const { datum_repay_list_id: id, ...data } = this.tableData[index]
      const solidData = this.tableSolid[index]
      const keys = Object.keys(data)
      let hasChange = false
      for (const key of keys) {
        if (data[key] !== solidData[key]) {
          hasChange = true
          break
        }
      }
      if (!hasChange) {
        return
      }
      const [, err] = await this.$utils.promise(
        this.$api.updateData(this.$serviceName, 'datum_repay_list', id, data)
      )
      if (err) {
        this.$message.error(`修改还款计划失败（${(err && err.status) || ''}）`)
      } else {
        this.tableSolid[index] = { ...data }
      }
    },
  },
}
</script>

<style lang="scss" scoped></style>
